import  { Component } from 'react';
import { View } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import './index.scss'

interface Props {
    handle?: any
}

interface State{
    isUp: boolean
    name: string
}

export default class Index extends Component<Props> {

    constructor (props) {
        super(props)
        this.state = {
            isUp: false,
            name: '查看更多'
        }
    }

    state:State

    UNSAFE_componentWillMount() { }
    componentDidMount() { }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }
    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    componentDidNotFound() { }

    handleMore() {
        const { handle } = this.props
        const { isUp } = this.state
        let state = {
            isUp: !isUp,
            name: '查看更多'
        }
        if (isUp) {
            state = {
                isUp: !isUp,
                name: '查看更多'
            }
        } else {
            state = {
                isUp: !isUp,
                name: '收起'
            }
        }
        this.setState(state, () => handle && handle(state.isUp))
    }
    render() {
        const { isUp, name } = this.state
        return (
            <View className='more-view' onClick={() => this.handleMore()}>
                <View className='more-text'>{name}</View>
                <View className={classnames('arraw', isUp && 'up')}>
                    <Iconfont name='icon-shaixuanxialajiantou' color='#ccc' size='30' />
                </View>
            </View>
        )
    }
}
